<template>
  <el-card class="info-card-wrapper" :padding="0">
    <div class="content-con">
      <div class="left-area" :style="{background: color, width: leftWidth}">
        <icons class="icon" :type="icon" :size="iconSize" color="#fff"/>
        <!-- <icons :is="iconType" :type="iconName" :color="iconColor" :size="iconSize"></icons> -->
      </div>
      <div class="right-area" :style="{width: rightWidth}">
        <div>
          <slot></slot>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import Icons from '_c/number/icons'
export default {
  name: 'InforCard',
  components: {
    Icons
  },
  props: {
    left: {
      type: Number,
      default: 36
    },
    color: {
      type: String,
      default: '#2d8cf0'
    },
    icon: {
      type: String,
      default: ''
    },
    iconSize: {
      type: Number,
      default: 20
    },
    shadow: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    leftWidth() {
      return `${this.left}%`
    },
    rightWidth() {
      return `${100 - this.left}%`
    }
  }
}
</script>

<style lang="scss">
.common {
  float: left;
  height: 100%;
  display: table;
  text-align: center;
}
.size {
  width: 100%;
  height: 100%;
}
.middle-center {
  display: table-cell;
  vertical-align: middle;
}
.info-card-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.info-card-wrapper .ivu-card-body {
  width: 100%;
  height: 100%;
}
.info-card-wrapper .content-con {
  width: 100%;
  height: 100%;
  position: relative;
}
.info-card-wrapper .content-con .left-area {
  float: left;
  height: 100%;
  display: table;
  text-align: center;
}
.info-card-wrapper .content-con .left-area > .icon {
  display: table-cell;
  vertical-align: middle;
}
.info-card-wrapper .content-con .right-area {
  float: left;
  height: 100%;
  display: table;
  text-align: center;
}
.info-card-wrapper .content-con .right-area > div {
  display: table-cell;
  vertical-align: middle;
}
</style>

